<template>
	 <view class="content">
		<!-- F1：标题 -->
		<text class="title">{{article.name}}</text>
		
		 <!-- F2：来源和发布时间 -->
		<view class="source">
			<text class="publisher">{{article.author}}</text>
			<text class="time">{{article.createTime}}</text>
		</view>
		
		<!-- F3：来自话题、讨论人数和点赞人数 -->
		<view class="talkNum">
			<text>来自与话题
				<text style="color: #3388ff ;">#垃圾回收dom活动#</text>
			</text>
			<view class="num"> 
				<text style="margin: 0 20px;">{{article.visitors}}人访问</text>
				<!-- <text>150123点赞</text> -->
			</view>
		</view>
		
		<!-- F4：话题内容详情 ：3段文字和3张图片 -->
		<u-parse :content="article.content"></u-parse>
		
		<!-- F4：话题内容详情 ：3段文字和3张图片
		<view class="article">
			第一段文字
			<view class="article-content">
				<text>
				垃圾分类，是指按一定规定或标准将垃圾分类储存、分类投放和分类搬运，从而转变成公共资源的一系列活动的总称。分类的目的是提高垃圾的资源价值和经济价值，力争物尽其用。
				</text>
			</view>
			
			图片
			<image class="article-img" src="../../../static/article1.png" mode="widthFix"></image>
			<view class="article-content">
				<text>
				生活垃圾一般按照可回收物、有害垃圾、餐厨垃圾、其他垃圾进行"四类"。
				</text>
			</view>
			
			<image class="article-img" src="../../../static/01.gif" mode="widthFix"></image>
			<view class="article-content">
				<text>
				促进资源回收利用，加快循环经济发展。实现垃圾减量，促进绿色发展。优化人居环境，提示文明水平。
				</text>
			</view>
			
			<image class="article-img" src="../../../static/article2.png" mode="widthFix"></image>
		</view> -->
		
		<!-- F5:相关推荐：2个 -->
		<text class="other">相关推荐</text>
		<uni-list v-for="items in articleRecommend">
			<uni-list-item  title="" class="list"  clickable @click="loadRerender(items.id)">
				<template v-slot:header>
					<view class="listContainer">
						<text class="listContainer-title">{{items.name}}</text>
						<text class="listContainer-content">{{items.content}}</text>
						<text class="listContainer-source">{{items.author}}</text>
					</view>
					<image class="image" :src="getImage(items.images)" mode="aspectFill"></image>
				</template>
			</uni-list-item>
			
		</uni-list>
	</view>
</template>

<script>
import findingApi from '../../../common/FindingService/FindingApi';
	export default {
		data() {
			return {
				id:'',
				article:[],
				articleRecommend:[],
			}
		},
		methods: {
			
			// 从对象存储中获取图片
			getImage(image) {
				return `http://43.136.172.73/api/v1/file/download?fileName=${image}`
			},
			// 相关推荐点击后重新渲染上面的文章
			loadRerender(id) {
				this.querySpecificArticle(id)
			},
			
			articleRecommendList(){
				findingApi.articleRecommend(2).then(res=>{
					console.log('成功查询到推荐文章：',res.data.data)
					this.articleRecommend=res.data.data
				})
			},
			
			querySpecificArticle(id){
				findingApi.querySpecificArticle(id).then(res=>{
					console.log('根据id查询具体文章：',res.data.data)
					this.article=res.data.data
					// this.article[i].createTime.split('T')[0]  split:以‘T’截字符串，返回值是数组
					this.article.createTime=this.article.createTime.split('T')[0]
				})
			},
		},
		onLoad(e) {
			this.id=e.id;
			// 根据id请求一篇具体的文章
			this.querySpecificArticle(this.id)
			
			// 相关推荐文章
			this.articleRecommendList()
		}
	}
</script>

<style lang="scss">
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin:60rpx ;
	.title{
		text-align: center;
		font-weight: bold;
		margin-top: $uni-spacing-col-lg;
		font-size: 1.2em;
	}
	.source{
		width: 100%;
		margin-left: $uni-spacing-row-base*3;
		margin-top: $uni-spacing-row-base;
		
		.publisher{
			margin-right: $uni-spacing-col-lg;
		}
		.time{
			color: $uni-text-color-grey;
			font-size: 0.8em
		}
	}
	
	.talkNum{
		width: 90%;
		margin:$uni-spacing-col-lg 0 $uni-spacing-col-lg*2;
		background-color:$uni-bg-color-hover;
		border-radius: $uni-border-radius-lg;
		padding: $uni-spacing-col-base;
		color: $uni-text-color-placeholder;
		.num{
			text-align: right;
			margin-top: $uni-spacing-col-sm;
			font-size: 0.8em
		}
	}
	.article{
		.article-content{
			text-indent: 2em;
		}
		.article-img{
			width: 90%;
			left: 5%;
			border-radius: $uni-border-radius-lg;
			margin: $uni-spacing-col-lg 0;
		}
	}
	.other{
		font-weight: bold;
		font-size: 1.2em;
		margin:$uni-spacing-col-lg*2 0 ;
		position: relative;
		left: -40%;
	}
	
	.list{
		width: 90vw;
		border: 1px solid $uni-text-color-disable ;
		border-radius: $uni-border-radius-lg;
		margin: $uni-spacing-col-lg 0;
		/deep/ .uni-list-item__container{
			padding: $uni-spacing-col-base $uni-spacing-col-sm;
		}
		
		.listContainer{
			width: 60%;
			display: flex;
			flex-direction: column;
			margin-right:$uni-spacing-row-base;
			margin-left: $uni-spacing-row-base;
			.listContainer-title{
				font-weight: bold;
			
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.listContainer-content{
				font-size: $uni-font-size-sm;
				color: $uni-text-color-placeholder;
				margin: $uni-spacing-col-base 0;
				@include ellipsis-2;
				
			}
			.listContainer-source{
				font-size: $uni-font-size-base;
				color: $uni-text-color-placeholder;
			}
		}
		.image{
			width: 40%;
			height: auto;
			margin-right: $uni-spacing-row-sm;
			border-radius: $uni-border-radius-lg;
		}
		/deep/ .uni-list-item__content{
			padding: 0;
		}
	}
}
</style>
